<template>
	<view class="container">
		<view class="form-section">
			<picker :range="bindTypes" v-model="form.typeIndex" @change="onTypeChange">
				<view class="picker">
					账户类型：<text>{{ bindTypes[form.typeIndex] }}</text>
				</view>
			</picker>
			<view v-if="form.typeIndex === 0" class="input-group">
				<view class="form-input">
					<input class="uni-input" v-model="form.alipayName" placeholder="请输入姓名" />
				</view>
				<view class="form-input">
					<input class="uni-input" v-model="form.alipayAccount" placeholder="请输入支付宝账号" />
				</view>
			</view>
			<view v-if="form.typeIndex === 1" class="input-group">
				<view class="form-input">
					<input class="uni-input" v-model="form.wechatName" placeholder="请输入姓名" />
				</view>
				<view class="form-input">
					<input class="uni-input" v-model="form.wechatAccount" placeholder="请输入微信号" />
				</view>
			</view>
			<view v-if="form.typeIndex === 2" class="input-group">
				<view class="form-input">
					<input class="uni-input" v-model="form.bankName" placeholder="请输入银行名称" />
				</view>
				<view class="form-input">
					<input class="uni-input" v-model="form.bankBranch" placeholder="请输入开户行名称" />
				</view>
				<view class="form-input">
					<input class="uni-input" v-model="form.bankCard" placeholder="请输入银行卡号" />
				</view>
				<view class="form-input">
					<input class="uni-input" v-model="form.bankUser" placeholder="请输入姓名" />
				</view>
			</view>
		</view>
		<button class="submit-btn" type="primary" @click="submitForm">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bindTypes: ['支付宝', '微信', '银行卡'],
				form: {
					typeIndex: 0,
					alipayName: '',
					alipayAccount: '',
					wechatName: '',
					wechatAccount: '',
					bankName: '',
					bankBranch: '',
					bankCard: '',
					bankUser: ''
				},
				id: null
			}
		},
		onLoad(options) {
			if (options && options.id) {
				this.id = options.id
				uni.setNavigationBarTitle({
					title: '修改收款账户'
				})
				this.loadAccount(options.id)
			} else {
				uni.setNavigationBarTitle({
					title: '添加收款账户'
				})
			}
		},
		methods: {
			onTypeChange(e) {
				this.form.typeIndex = Number(e.detail.value)
			},
			loadAccount(id) {
				// 这里应从后端获取数据，以下为模拟
				// 假设id为1是支付宝，2是微信，3是银行卡
				if (id == 1) {
					this.form.typeIndex = 0
					this.form.alipayName = '张三'
					this.form.alipayAccount = 'alipay_123456'
				} else if (id == 2) {
					this.form.typeIndex = 1
					this.form.wechatName = '李四'
					this.form.wechatAccount = 'wxid_abcdef'
				} else if (id == 3) {
					this.form.typeIndex = 2
					this.form.bankName = '中国银行'
					this.form.bankBranch = '北京分行'
					this.form.bankCard = '6222021234567890'
					this.form.bankUser = '王五'
				}
			},
			submitForm() {
				// 校验
				if (this.form.typeIndex === 0) {
					if (!this.form.alipayName || !this.form.alipayAccount) {
						uni.showToast({
							title: '请填写完整支付宝信息',
							icon: 'none'
						})
						return
					}
				} else if (this.form.typeIndex === 1) {
					if (!this.form.wechatName || !this.form.wechatAccount) {
						uni.showToast({
							title: '请填写完整微信信息',
							icon: 'none'
						})
						return
					}
				} else if (this.form.typeIndex === 2) {
					if (!this.form.bankName || !this.form.bankBranch || !this.form.bankCard || !this.form.bankUser) {
						uni.showToast({
							title: '请填写完整银行卡信息',
							icon: 'none'
						})
						return
					}
				}
				// 提交逻辑
				uni.showLoading({
					title: '提交中...'
				})
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				}, 1000)
			}
		}
	}
</script>

<style>
	.container {
		padding: 40rpx 30rpx;
		background: #f8f8f8;
		min-height: 100vh;
	}

	.form-section {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx 20rpx 10rpx 20rpx;
		margin-bottom: 40rpx;
	}

	.picker {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 30rpx;
	}

	.form-input {

		background-color: #f8f8f8;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		border: 1rpx solid #eee;

	}

	.submit-btn {
		width: 100%;
		font-size: 32rpx;
		border-radius: 50rpx;
	}
</style>